<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

const isProcessing = ref(false)
const segmentationProgress = ref(0)
const analysisProgress = ref(0)
const overallProgress = ref(0)
const processingStatus = ref<'processing' | 'success' | 'failed'>('processing')
const chartInstance = ref<echarts.ECharts | null>(null)

// 初始化环形进度图
const initChart = () => {
  const chartDom = document.getElementById('progress-chart')
  if (!chartDom) return
  
  chartInstance.value = echarts.init(chartDom)
  updateChart()
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance.value) return
  
  const option = {
    series: [{
      type: 'pie',
      radius: ['70%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        formatter: `${Math.round(overallProgress.value)}%`
      },
      data: [{
        value: overallProgress.value,
        name: '总进度',
        itemStyle: {
          color: '#409EFF'
        }
      }, {
        value: 100 - overallProgress.value,
        name: '剩余',
        itemStyle: {
          color: '#E4E7ED'
        }
      }]
    }]
  }
  
  chartInstance.value.setOption(option)
}

// 模拟处理过程
const simulateProcessing = () => {
  isProcessing.value = true
  processingStatus.value = 'processing'
  segmentationProgress.value = 0
  analysisProgress.value = 0
  overallProgress.value = 0
  
  // 模拟分割进度
  const segInterval = setInterval(() => {
    if (segmentationProgress.value < 100) {
      segmentationProgress.value += Math.random() * 10
      if (segmentationProgress.value > 100) segmentationProgress.value = 100
      overallProgress.value = (segmentationProgress.value + analysisProgress.value) / 2
      updateChart()
    } else {
      clearInterval(segInterval)
      // 开始模拟分析进度
      const analysisInterval = setInterval(() => {
        if (analysisProgress.value < 100) {
          analysisProgress.value += Math.random() * 8
          if (analysisProgress.value > 100) analysisProgress.value = 100
          overallProgress.value = (segmentationProgress.value + analysisProgress.value) / 2
          updateChart()
        } else {
          clearInterval(analysisInterval)
          finishProcessing()
        }
      }, 300)
    }
  }, 200)
}

// 完成处理
const finishProcessing = () => {
  isProcessing.value = false
  // 随机成功或失败
  processingStatus.value = Math.random() > 0.3 ? 'success' : 'failed'
  if (processingStatus.value === 'failed') {
    ElMessage.error('处理失败，请重试')
  } else {
    ElMessage.success('处理完成')
  }
}

// 重试
const retry = () => {
  simulateProcessing()
}

onMounted(() => {
  initChart()
})
</script>

<template>
  <div class="processing-status">
    <div class="status-container">
      <div class="progress-chart">
        <div id="progress-chart" style="width: 200px; height: 200px;"></div>
      </div>
      
      <div class="progress-details">
        <div class="progress-item">
          <div class="progress-label">影像分割进度</div>
          <el-progress 
            :percentage="Math.round(segmentationProgress)" 
            :status="processingStatus === 'failed' ? 'exception' : undefined"
          />
        </div>
        
        <div class="progress-item">
          <div class="progress-label">大模型分析进度</div>
          <el-progress 
            :percentage="Math.round(analysisProgress)"
            :status="processingStatus === 'failed' ? 'exception' : undefined"
          />
        </div>
      </div>
      
      <div class="model-preview">
        <!-- 这里可以添加3D模型预览 -->
        <div class="placeholder-model" :class="{ rotating: isProcessing }">
          <i class="el-icon-view" style="font-size: 48px;"></i>
        </div>
      </div>
      
      <div class="actions">
        <el-button 
          type="primary" 
          @click="simulateProcessing"
          :loading="isProcessing"
          :disabled="isProcessing"
        >
          开始处理
        </el-button>
        
        <el-button 
          v-if="processingStatus === 'failed'" 
          type="warning" 
          @click="retry"
          :disabled="isProcessing"
        >
          重试
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.processing-status {
  padding: 20px;
}

.status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.progress-details {
  width: 100%;
  max-width: 500px;
}

.progress-item {
  margin-bottom: 20px;
}

.progress-label {
  margin-bottom: 8px;
  font-weight: 500;
}

.model-preview {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8px;
}

.placeholder-model {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #e4e7ed;
  border-radius: 50%;
}

.rotating {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.actions {
  margin-top: 20px;
}
</style> 